<template>
    <div class="charts" ref="charts"></div>
</template>
<script>
    import *as echarts from 'echarts';

    export default {
        name: '',
        mounted() {
            let lineCharts = echarts.init(this.$refs.charts)
            lineCharts.setOption({
                xAxis: {
                    show: false,
                    type: 'category'
                },
                yAxis: {
                    show: false
                },
                series: [
                    {
                        type: 'line',
                        data: [16, 40, 33, 50, 20, 15, 80],
                        //拐点的样式的设计
                        itemStyle: {
                            opacity: 0
                        },
                        lineStyle: {
                            color: 'purple'
                        },
                        // 填充颜色
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'purple' // 0% 处的颜色
                                }, {
                                    offset: 1, color: '#fff' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            }
                        }
                    }

                ],
                grid: {
                    left: 0,
                    top: 5,
                    right: 0,
                    bottom: 0
                }
            })
        },
    };
</script>
<style scoped>
    .charts {
        width: 100%;
        height: 100%;
    }
</style>